<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <!--设置移动端访问缩放效果-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!--引入semantic-ui框架-->
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
    <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <!--自定义css-->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <title th:replace="${title}">公共片段</title>
</head>

<body>

<!--前台导航栏-->
<!--ui:表示使用semantic提供的UI组件-->
<!--inverted:反转颜色-->
<!--attached:附加，连接，将两个片段连到一起，圆角-->
<!--segment:片段（UI组件）-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <!--container:容器，包裹的元素会有响应式展现效果-->
    <div class="ui container">
        <!--menu:菜单（UI组件）-->
        <!--secondary:一种UI样式-->
        <!--stackable:适应手机端响应样式，可堆叠的-->
        <div class="ui inverted secondary stackable menu">
            <!--header:头样式-->
            <!--item:项（UI组件）-->
            <h2 class="ui teal header item" th:text="#{blog.name}">我的博客</h2>
            <!--导航项-->
            <!--i标签:icon，显示斜体文本效果-->
            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'">
                <i class="home icon"></i><span th:text="#{nav.index}">首页</span>
            </a>
            <a href="#" th:href="@{/types/0}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'">
                <i class="th icon"></i><span th:text="#{nav.types}">分类</span>
            </a>
            <a href="#" th:href="@{/tags/0}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'">
                <i class="tags icon"></i><span th:text="#{nav.tags}">标签</span>
            </a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'">
                <i class="clone icon"></i><span th:text="#{nav.archives}">归档</span>
            </a>
            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'">
                <i class="user icon"></i><span th:text="#{nav.about}">关于我</span>
            </a>
            <!--搜索框-->
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" method="get" target="_blank" th:action="@{/search}" th:method="get">
                    <!--transparent:透明效果-->
                    <div class="ui icon inverted transparent input">
                        <!--placeholder:占位符、该属性提供可描述输入字段预期值的提示信息（hint）-->
                        <!--placeholder:该提示会在输入字段为空时显示，并会在字段获得焦点时消失-->
                        <!--placeholder:该属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password-->
                        <input id="search-btn" name="keyword" type="text" placeholder="搜索 . . ." th:value="${keyword}">
                        <!--link:鼠标悬浮时，展示为小手的样式-->
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--移动端下才展示的展开菜单按钮-->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--页脚-->
<!--vertical:垂直，直角效果，如果两个片段相邻，中间还可以加个横线-->
<footer th:fragment="footer" class="ui inverted vertical m-padded-tb-large segment">
    <div class="ui center aligned container">
        <!--grid:表格，一行分为16格，占的格数必须是英文表示，不能用数字-->
        <!--divided:显示分割线-->
        <div class="ui inverted divided stackable grid">
            <!--二维码-->
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt=""
                             class="ui rounded image" style="width:110px">
                    </div>
                </div>
            </div>
            <!--最新推荐博客-->
            <div class="four wide column">
                <h4 class="ui header inverted m-text-spaced m-opacity-mini">最新推荐</h4>
                <div id="footer-blog-container">
                    <!--list:列表（UI组件）-->
                    <div class="ui inverted link list" th:fragment="footerBlogList">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"
                           class="item" th:each="blog : ${blogs}" th:text="${blog.title}">
                            用户故事（user story）
                        </a>
                        <!--/*-->
                        <a href="#" class="item">刻意联系</a>
                        <a href="#" class="item">semantic-ui快速入门</a>
                        <!--*/-->
                    </div>
                </div>
            </div>
            <!--联系我-->
            <div class="four wide column">
                <h4 class="ui header inverted m-text-spaced m-opacity-mini">联系我</h4>
                <!--list:列表（UI组件）-->
                <div class="ui inverted link list">
                    <div class="item" th:text="#{index.email}">Email：guoyx@vip.qq.com</div>
                    <div class="item">QQ：805372666</div>
                </div>
            </div>
            <!--博客说明-->
            <div class="five wide column">
                <h4 class="ui header inverted m-text-spaced m-opacity-mini">欢迎你</h4>
                <div class="ui inverted m-text-thin m-text-spaced m-opacity-tiny">
                    我会在这里分享关于编程、工作、生活、写作、思考相关的内容，希望可以给来到这儿的你有所帮助。
                </div>
            </div>
        </div>
        <!--divider:分割线-->
        <!--section:分割-->
        <div class="ui section divider"></div>
        <div class="m-text-thin m-text-spaced m-opacity-small">版权所有：xiaosaguo.net</div>
    </div>
</footer>


<th:block th:fragment="script">
    <!--引入jquery-->
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>-->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <!--引入semantic-ui js-->
    <!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
    <script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script th:inline="javascript">
        // 加载完页面，加载页脚最新推荐博客列表
        $('#footer-blog-container').load(/*[[@{/footer/blogs}]]*/"/footer/blogs");
        // 移动端点击菜单按钮，打开关闭菜单切换
        $('.menu.toggle').on('click', function () {
            // toggleClass : 开关事件 -> 开关样式
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</th:block>


</body>
</html>